<template>
	<view>
		<!-- <view class="missionNaver">
			<view v-for="(item, index) in list" :key="index" :class="[{ item }, { itemStyle: showStyle == index }]" @click="getMissionList(item.spell, index)">
				{{ item.text }}
			</view>
		</view> -->

		<view class="missionBaner">
			<view @click="articleDetail(234)" class="missionImg">
				<view class="taskEarnings">
					<view>今日可使用车豆：</view>
					<view class="earningNum">
						<text >{{ todayBean }}</text>
						<!-- <text class="icon cuIcon-question" style="margin-left: 20rpx;font-size: 35rpx;"></text> -->
					</view>
				</view>
				<!-- <image src="/static/images/banner.png"></image> -->
			</view>
		</view>

		<scroll-view @scrolltolower="uploadMissioc" :style="'height:' + wh + 'px'" scroll-y="true" class="scroll">
			<view class="missionList">
				<view v-for="(item, index) in taskList" :key="index" class="missionItem" :class=" item.isShow ? '':'hidden'">
					<view class="itemLeft">
						<view class="itemLeftImg">
							<image v-if="showStyle == 0" src="/static/images/douyin1.png"></image>
							<image v-if="showStyle == 1" src="/static/images/kuaishou1.png"></image>
							<image v-if="showStyle == 2" src="/static/images/xhs1.png"></image>
						</view>
						<view class="itemLeftFont">
							<view class="itemLeftTop">{{ item.task_name }}</view>
							<view class="itemLeftBot">
								<text class="taskType" v-if="item.type == '1'" style="color: #8bd9c8;">关注</text>
								<text class="taskType" v-if="item.type == '2'" style="color: #f55457;">点赞</text>
								<text class="taskType" v-if="item.type == '3'" style="color: #a19eea;">评论</text> 
								<text class="taskType" v-if="item.type == '5'" style="color: #a19eea;">刷单</text>
								<text class="taskType" v-if="item.type == '6'" style="color: #a19eea;">转发</text>
								<text class="missionNum">¥{{ item.price }}</text>
								<!-- <text class="contribution">贡献值*100</text> -->
							</view>
						</view>
					</view>
					
					<view @click="getMission(item)" v-if="item.user_task_status == null" class="itemRight"><text class="itemRight-bottom">领取</text></view>
					<view v-else-if="item.user_task_status == 3" class="itemRights"><text class="itemRightBottom">已完成</text></view>
					<view v-else class="itemRightTow" style="display: flex;">
						<view class="itemRights" style="margin-right: 10rpx;">已领取</view>
						<view v-if="item.work_num" class="itemRight"  @click="openApp(item.task_id,item.work_num)">去抖音</view>
						<view v-if="item.work_url" class="itemRight"  @click="open(item.task_id,item.work_url)">去抖音</view>
					</view>
					<!-- h5的 -->
					<!-- <view v-else @click="copyLink(item.work_url)" class="itemRights"><text class="itemRightBottom">复制链接</text></view> -->
					
				</view>
				<view class="over_line" v-if="isover">----- 我也是有底线的 ------</view>
			</view>
			<view v-if="!taskList.length" class="notAvailable">暂无任务~</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					text: '抖音',
					spell: 'douyin'
				},
				{
					text: '快手',
					spell: 'kuaishou'
				},
				{
					text: '小红书',
					spell: 'xiaohongshu'
				}
			],
			showStyle: 0,
			wh: '', // 当前屏幕可用的高度
			taskList: [], // 任务列表
			pagenum: 1, // 页码值
			pagesize: 20, // 每页显示多少条数据
			total: '',
			isover: false, // 判断是否到底部，给用户提示
			isloading: false, // 判断数据是否在加载中
			platform: 'douyin',
			userId: '',
			pH: 0 ,//窗口高度
			todayBean:0,
		};
	},
	onLoad() {
		// 获取设备的高度
		let that = this;
		uni.getSystemInfo({
			success: function(res) {
				that.wh = res.windowHeight - 144
			}
		});
		uni.getNetworkType({
		    success: function (res) {
				if(res.networkType == 'wifi') {
					that.$common.errorToShow('请不要在wifi下做任务');
				}
		    }
		});
		that.getTaskList();
	},
	onShow() {
		this.userId = this.$db.get('userId');
		this.getMyBean();
	},
	onPullDownRefresh() {
		let that = this
		that.taskList = [];
		that.isloading = false;
		that.isover = false;
		that.pagenum = 1;
		that.pagesize = 20;
		that.$api.getTaskList(
			{
				page: that.pagenum,
				limit: that.pagesize,
				user_id: that.userId,
				platform: that.platform
			},
			res => {
				if(res.status == 200) {
					that.total = res.data.count;
					let lists = res.data.data;
					lists.forEach(item=>{
						item.isShow = true
					})
					that.taskList = [...that.taskList, ...lists];
					if(res.data.isdown){
						that.pagenum ++;
						that.getTaskList();
					}
					that.$common.successToShow('刷新成功');
				}else {
					that.$common.errorToShow('刷新失败');
				}
				uni.stopPullDownRefresh();
			}
		);
	},
	methods: {
		// 查看文章详情
		articleDetail(articleId) {
			this.$common.navigateTo('/pages/strategy/strategy_detail?id=' + articleId + '&id_type=1');
		},
		//获取今日可使用嗨豆
		getMyBean(){
			let that = this;
			that.$api.getAuthBean({},res=>{
				if(res.status==200){
					that.todayBean = res.data.num;
					// that.$db.set("currDay",res.data.day);
					// that.$db.set("currBean".res.data.day,res.data.num);
				}
			})
		},
		// 获取任务列表
		getTaskList() {
			let that = this;
			that.userId = that.$db.get('userId');
			// 正在加载下页数据
			that.isloading = true;
			that.$api.getTaskList(
				{
					page: that.pagenum,
					limit: that.pagesize,
					user_id: that.userId,
					platform: that.platform
				},
				res => {
					that.total = res.data.count;
					let lists = res.data.data;
					lists.forEach(item=>{
						item.isShow = true
					})
					that.taskList = [...that.taskList, ...lists];
					// 没有在加载下页数据
					that.isloading = false;
					if(res.data.isdown){
						that.pagenum ++;
						that.getTaskList();
					}
					if (this.pagesize * this.pagenum >= this.total) {
						this.isover = true;
					}
				}
			);
		},
		// 切换导航栏
		getMissionList(platform, index) {
			if (this.showStyle == index) return;
			this.showStyle = index;
			this.taskList = [];
			this.platform = platform;
			this.isloading = false;
			this.isover = false;
			this.pagenum = 1;
			this.pagesize = 20;
			this.getTaskList();
		},

		// 滚动到底部加载任务数据
		uploadMissioc() {
			if (!this.taskList.length) {
				return;
			}
			// 判断当前是否正在请求数据中
			if (this.isloading) {
				return;
			}
			if (this.isover) {
				return;
			}
			this.pagenum++;
			this.getTaskList();
		},
		// 领取任务
		getMission(item) {
			if(this.todayBean<=0){
				this.$common.errorToShow("今日已领完");
				return;
			}
			this.$api.getTask(
				{
					id: item.task_id
				},
				res => {
					console.log(res)
					if (res.status == 200) {
						item.status = 1;
						item.user_task_status = 1
						// this.getTaskList(this.platform);
						this.getMyBean()
					}
					if (res.status == 400) {
						this.$common.errorToShow(res.message);
						if(res.message == '请先绑定抖音') {
							this.$util.Tips({
								title: res.message,
								endtime:1000
							}, {
								tab: 2,
								url:'/pages/bind/douyin/douyin'
							})
						}
					}
				}
			);
		},
		open(task_id,url) {
			// #ifdef APP-PLUS
			if (plus.os.name == 'Android') {
				plus.runtime.openURL(url,function(res) {
					console.log(res)
				},'com.ss.android.ugc.aweme');
			} else if (plus.os.name == 'iOS') {
				plus.runtime.launchApplication({ action: url }, function(e) {
					console.log('Open system default browser failed: ' + e.message);  
				});  
			}
			// #endif
			
			// #ifdef H5
				let isWeiXin = this.$common.isWeiXinBrowser()
				if(isWeiXin){
					uni.setClipboardData({
						data: url,
						success: function(res) {
							uni.showToast({
								title: '已复制到剪辑版'
							});
						}
					});					
				} else {
					window.open(url);
				}
			// #endif
			this.taskList.forEach(item=>{
				if(item.task_id == task_id){
					item.isShow = false
				}
			})
		},
		// 去完成任务
		openApp(task_id,appurl) {
			switch (this.showStyle) {
				case 0:
					appurl = `snssdk1128://aweme/detail/${appurl}`
					break;
				case 1:
					appurl = `kwai://work/${appurl}`
					break;
				case 2:
					appurl = `xhsdiscover://video_feed/${appurl}`
					break;
			}
			// #ifdef APP-PLUS
			if (plus.os.name == 'Android') {
				plus.runtime.openURL(appurl, function(res) {
					console.log(res);
				});  
			} else if (plus.os.name == 'iOS') {  
				plus.runtime.launchApplication({ action: appurl }, function(e) {  
					console.log('Open system default browser failed: ' + e.message);  
				});  
			}
			// #endif

			// #ifdef H5
			window.open(appurl);
			// #endif
			this.taskList.forEach(item=>{
				if(item.task_id == task_id){
					item.isShow = false
				}
			})
		},
		copyLink(link) {
			let that = this
			uni.setClipboardData({
				data: link,
				success: function() {
					that.$common.successToShow('复制成功');
				}
			});
		}
	}
};
</script>

<style lang="less">
page {
	background-color: #ffffff !important;
}
.missionNaver {
	display: flex;
	justify-content: space-around;
	margin-top: 20rpx;
	.item {
		position: relative;
		font-size: 30rpx;
		font-weight: bold;
		color: #b8b8b8;
		z-index: 1;
	}
	.itemStyle {
		color: #000000;
	}
	.itemStyle::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		background-color: #ffe287;
		width: 100%;
		height: 13rpx;
		border-radius: 5rpx;
		z-index: -1;
	}
}

.missionBaner {
	.missionImg {
		position: relative;
		width: 718rpx;
		height: 248rpx;
		margin: 20rpx auto;
		background: url(../../static/images/banner.png) no-repeat;
		background-size: 100% 100%;
	}
	.taskEarnings {
				position: absolute;
				top: 50%;
				left: 50rpx;
				transform: translateY(-50%);
				font-size: 30rpx;
				font-weight: bold;
				color: #ffffff;
				text-shadow: 0px 3rpx 3rpx rgba(255, 54, 0, 0.5);
				.earningNum {
					margin-top: 10rpx;
					font-size: 30rpx;
				}
			}
}

.scroll {
	.missionList {
		overflow: hidden;
		.over_line {
			text-align: center;
			background-color: #F5F5F5;
			font-size: 26rpx;
			color: #999;
			padding: 20rpx 0;
		}
		.missionItem:last-child {
			margin-bottom: 0;
		}
		.missionItem {
			padding: 0 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;
			&.hidden{
				display: none;
			}
			.itemLeft {
				display: flex;
				align-items: center;
				flex: 1;
				overflow: hidden;
				.itemLeftImg {
					width: 80rpx;
					height: 80rpx;
					margin-right: 25rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.itemLeftFont {
					flex: 1;
					line-height: 50rpx;
					overflow: hidden;
					.itemLeftTop {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #343434;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.itemLeftBot {
						.taskType {
							font-size: 24rpx;
						}
						.missionNum {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #fe0026;
							margin: 0 30rpx 0 20rpx;
						}
						.contribution {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #b8b8b8;
						}
					}
				}
			}
			.itemRight {
				width: 120rpx;
				height: 52rpx;
				background: linear-gradient(90deg, #ff9e00 0%, #ff6500 100%);
				// background: linear-gradient(-133deg, #FF0000, #F95050);
				border-radius: 26rpx;
				line-height: 52rpx;
				text-align: center;
				color: #ffffff;
				&.done {
					background: #eeeeee;
				}
			}
			.itemRights {
				width: 120rpx;
				height: 52rpx;
				background: #eeeeee;
				border-radius: 26rpx;
				line-height: 52rpx;
				text-align: center;
				color: #5e5e5e;
			}
			.itemRightTow {
				display: flex;
				width: 240rpx;
				height: 52rpx;
			}
		}
	}

	.notAvailable {
		width: 100%;
		height: 150rpx;
		text-align: center;
		line-height: 200rpx;
		font-size: 24rpx;
		color: #666;
	}
}
</style>
